<script setup  lang="ts">
import type { FormRules } from "element-plus"
import { loginApi } from "../login/apis"
import {getCardDetailDetailApi, sendCommentApi, doLikeApi, doCollectApi, doMakeCardApi, doUnLikeApi} from "@/api"
import shangchuan2 from '@@/assets/images/layouts/shangchuan3.png';
import Header from "@@/components/Head/index.vue"
import goToBottom from '@@/assets/images/layouts/go_to_bottom.png'
import { useUserStore } from "@/pinia/stores/user.js"
import { onBeforeMount, onMounted, ref, unref } from "vue"
import {LoginRequestData} from "@/pages/login/apis/type";
import {removeToken} from "@@/utils/cache/cookies";
const userStore = useUserStore()
const dialogVisible = ref(false)
const commentDialog= ref(false)
const router = useRouter()
const checked = ref(true)
const token = ref("")
const list = ref([]) // 10条AI推荐列表数据
const username = ref("")
const user_id = ref(0)
const yaosukaDetailData = ref({ id: "", title: "", content: "", desc: "",isDoLike: 0, isDoCollected: 0,collect_num: 0,good_num: 0,share_num: 0, like_num: 0, comment_num: 0  })
const commentForm = ref('')
const commentFormRef = useTemplateRef("commentFormRef")
const formSendData = ref({
  id: null
})
const id = ref(null)
import aiYaoSuKa1 from '@@/assets/images/layouts/ai-word1.png';
import aiYaoSuKa11 from '@@/assets/images/layouts/ai-word11.png';
import aiYaoSuKa2 from '@@/assets/images/layouts/ai-word2.png';
import aiYaoSuKa21 from '@@/assets/images/layouts/ai-word21.png';
import aiYaoSuKa3 from '@@/assets/images/layouts/ai-word3.png';
import aiYaoSuKa31 from '@@/assets/images/layouts/ai-word31.png';
import fileUpload from '@@/assets/images/layouts/fileupload3.png';
import goodGray from "@@/assets/images/layouts/good-gray.png";
import goodBlue from "@@/assets/images/layouts/good-blue.png";
import starGray from "@@/assets/images/layouts/star-gray.png";
import starBlue from "@@/assets/images/layouts/star-blue.png";
import commentGray from "@@/assets/images/layouts/commentGray.png";
import shareGray from "@@/assets/images/layouts/shareGray.png";
import groupGray from "@@/assets/images/layouts/groupGray.png";
import linkGray from "@@/assets/images/layouts/linkGray.png";
import aiYaoSuKaGreen from "@@/assets/images/layouts/zuoce-green-32.png";
import aiYaoSuKaBlue from "@@/assets/images/layouts/zuoce-14-14.png";
import aiYaoSuKaGray from "@@/assets/images/layouts/zuoce-gray-14-14.png";
const route = useRoute()
const askContent = ref("")
/** 登录按钮 Loading */
const loading = ref(false)

const goodImg = ref(goodGray)
const starImg = ref(starGray)
const commentImg = ref(commentGray)
const shareImg = ref(shareGray)
const groupImg = ref(groupGray)
const linkImg = ref(linkGray)
const scrollContainer = ref(null);
const go_to_bottom_show = ref(true)
/** 登录表单校验规则 */
const loginFormRules: FormRules = {
  account: [
    { required: true, message: "请输入用户名/账号", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
  ],
  code: [
  ]
}
/** 登录表单元素的引用 */
const loginFormRef = useTemplateRef("loginFormRef")
/** 登录表单数据 */
const loginFormData: LoginRequestData = reactive({
  username: "",
  account: "",
  password: "",
  mobile: "",
  code: ""
})
onBeforeMount(() => {
  // 组件已完成响应式状态设置，但未创建DOM节点
  username.value = userStore.getUserName().value
  user_id.value = userStore.getUserId().value
  token.value = userStore.token
  if (token.value === '') {
    dialogVisible.value = true
  }
  getCardDetailDetail()
  id.value = route.params.id ? route.params.id : 10000
  formSendData.value.id = id.value
})


function cancelComment() {
  commentForm.value =  ""
  commentDialog.value = false
}
/** 提交评论 */
function handleComment() {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  if (commentForm.value !== "") {
    const data2 = {
      source_id: formSendData.value.id,
      contents: commentForm.value,
      user_id: userStore.getUserId().value,
      ctype: 12,
      img_list: "",
      action: 2
    }
    sendCommentApi(data2).then((data) => {
      commentDialog.value = false
      commentForm.value =  ""
      yaosukaDetailData.value.comment_num = yaosukaDetailData.value.comment_num + 1
      ElMessage.success({
        message: "评论成功",
        type: "success",
        duration: 2000
      })
    })
  } else {
    ElMessage.error({
      message: "请输入评论内容",
      type: "warning",
      duration: 2000
    })
  }

}
// ctype  类型:1课程,2资讯,3语料,4问题,11原文卡,12要素卡,13摘要卡,14应询卡,5其他
// action 操作类型:1点赞,2踩一脚,3收藏,4打卡,5其他
function doLike(pid) {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  const data2 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 12,
    img_list: "",
    action: 1
  }
  doLikeApi(data2).then(({ code, msg }) => {
    if (code == 0) {
      yaosukaDetailData.value.isDoLike = 1
      yaosukaDetailData.value.good_num = yaosukaDetailData.value.good_num + 1
      ElMessage.success({
        message: "点赞成功",
        type: "success",
        duration: 2000
      })
    } else {
      ElMessage.error({
        message: msg,
        type: "warning",
        duration: 2000
      })
    }
  })
}
function doUnLike(pid, action) {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  if( pid == "" || !pid) {
    return ElMessage.error({
      message: "ID参数错误",
      type: "warning",
      duration: 2000
    })
  }
  const data2 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 12,
    action: action
  }
  doUnLikeApi(data2).then(({ code, msg }) => {
    if (code == 0) {
      if (action === 1) {
        yaosukaDetailData.value.isDoLike = 0
        yaosukaDetailData.value.good_num = yaosukaDetailData.value.good_num - 1
        ElMessage.success({
          message: "取消点赞成功",
          type: "success",
          duration: 2000
        })
      } else if (action === 3) {
        yaosukaDetailData.value.isDoCollected = 0
        yaosukaDetailData.value.collect_num = yaosukaDetailData.value.collect_num - 1
        ElMessage.success({
          message: "取消收藏成功",
          type: "success",
          duration: 2000
        })
      }
    } else {
      ElMessage.error({
        message: msg,
        type: "warning",
        duration: 2000
      })
    }
  })
}
function doCollect(pid) {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  const data2 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 12,
    action: 3
  }
  doCollectApi(data2).then(({ code, msg }) => {
    if (code == 0) {
      yaosukaDetailData.value.isDoCollected = 1
      yaosukaDetailData.value.collect_num = yaosukaDetailData.value.collect_num + 1
      ElMessage.success({
        message: "收藏成功",
        type: "success",
        duration: 2000
      })
    } else {
      ElMessage.error({
        message: msg,
        type: "warning",
        duration: 2000
      })
    }
  })
}
function showCommentDialog(pid) {
  formSendData.value.id = pid
  console.log(formSendData.value.id )
  commentDialog.value = true
}
function goToUrl (type) {
  router.push({
    path: type
  })
}
function doSubmit (pid) {
  if( token.value == "" || userStore.getUserId().value == 0) {
    return ElMessage.error({
      message: "请先登录",
      type: "warning",
      duration: 2000
    })
  }
  const data2 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 12,
    action: 4
  }
  doMakeCardApi(data2).then(({code, msg}) => {
    console.log(code)
    if (code === 0) {
      ElMessage.success({
        message: "打卡成功",
        type: "success",
        duration: 2000
      })
    } else {
      ElMessage.error({
        message: msg,
        type: "warning",
        duration: 2000
      })
    }

  })
}
/** 登录 */
function handleLogin() {
  loginFormRef.value?.validate((valid) => {
    if (!valid) {
      return
    }
    loginFormData.username = loginFormData.account
    loginFormData.mobile = loginFormData.account
    loading.value = true
    loginApi(loginFormData).then(({ data }) => {
      userStore.setUsername(data.mobile) // token-admin
      userStore.setToken(data.token) // token-admin
      dialogVisible.value = false
    }).catch(() => {
      ElMessage.error({
        message: "验证失败",
        type: "warning",
        duration: 2000
      })
      // loginFormData.password = ""
    }).finally(() => {
      loading.value = false
    })
  })
}
function logout() {
  token.value = ""
  username.value = ""
  removeToken()
  userStore.setToken("") // token-admin
  userStore.setUsername("")
}
function askQuestion() {
  console.log('askQuestion')
}
function getCardDetailDetail() {
  const data2 = { id: route.params.id, user_id: user_id.value}
  getCardDetailDetailApi(data2).then(({ data }) => {
    yaosukaDetailData.value.title = data.title
    yaosukaDetailData.value.content = data.content
    yaosukaDetailData.value.isDoLike = data.is_liked
    yaosukaDetailData.value.isDoCollected = data.is_collected
    yaosukaDetailData.value.collect_num = data.collect_num
    yaosukaDetailData.value.good_num = data.good_num
    yaosukaDetailData.value.comment_num = data.comment_num
    yaosukaDetailData.value.share_num = data.share_num
  }).catch((data) => {
  }).finally(() => {
    loading.value = false
  })
}
function showShareDialog(pid) {
  // formSendData.value.id = pid
  const data4 = {
    source_id: pid,
    user_id: userStore.getUserId().value,
    ctype: 12,
    img_list: "",
    action: 5 // 分享标记
  }
  doLikeApi(data4).then(({ code }) => {
    if (code == 0) {
      yaosukaDetailData.value.share_num = yaosukaDetailData.value.share_num + 1
    }
  })
  // copyText()
}

function scrollToBottom () {
  // console.log(scrollContainer.value)
  // console.log(scrollContainer.value.scrollHeight)
  if (scrollContainer.value) {
    scrollContainer.value.scrollTo({
      top: scrollContainer.value.scrollHeight, // 滚动到最底部
      behavior: 'smooth' // 平滑滚动效果（如果需要的话）
    });
  }
}
const handleScroll = () => {
  const scrollTop = scrollContainer.value.scrollTop;
  // console.log(scrollTop)
  if (scrollTop >= 500) {
    go_to_bottom_show.value = false
  } else {
    go_to_bottom_show.value = true
  }
};
</script>

<template>
  <div class="container" style="width: 100%;max-width: 2560px;display: flex;flex-direction: column;height: 100vh;">
    <Header :activeId="1" />
    <div class="ai w-1200">
      <div class="ai-left">
        <div class="ai-left-tool">
          <div class="ai-left-tool-item">
            <div class="icon icon1" style="height: 31px; width: 31px;" />
            <div class="title" @click="goToUrl('/ai')">
              推荐
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon2" style="height: 30px; width: 30px;" />
            <div class="title" @click="goToUrl('/ai2')">
              问答
            </div>
          </div>
          <div class="ai-left-tool-item selected">
            <div class="icon icon3 iconSelected" style="height: 32px; width: 30px;" />
            <div class="title titleSelected" @click="goToUrl('/ai3')">
              学习
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon5" style="height: 30px; width: 30px;" />
            <div class="title">
              专业工具
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon6" style="height: 30px; width: 30px;" />
            <div class="title" @click="goToUrl('/ai4')">
              记录
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon7" style="height: 30px; width: 30px;" />
            <div class="title" @click="goToUrl('/ai5')">
              指南
            </div>
          </div>
        </div>
        <!---->
      </div>
      <div class="ai-right scroll" >
        <div class="el-scrollbar askAnswer-box" id="messageContainer">
          <div class="el-scrollbar__wrap" style="height: calc(100% - 248px);">
            <div class="el-scrollbar__view" style="height: 690px;">
              <div>
                <div>
                  <div class="ysk2-box">
                    <div class="ysk-box-top">
                      <div class="left">
                        <div class="text1 active1">
                          政策
                        </div>
                        <div class="text1">
                          资讯
                        </div>
                        <div class="text1">
                          文献
                        </div>
                        <div class="text1">
                          数据
                        </div>
                        <div class="text1">
                          课件
                        </div>
                        <div class="text1">
                          其他
                        </div>
                      </div>
                      <div class="right">
                        <div class="right-item">
                          <div class="imgKa"><img :src="aiYaoSuKa1" class="img4" /></div>
                          <div class="text2" ref="buttonRef">摘要卡</div>
                        </div>
                        <div class="right-item">
                          <div class="imgKa"><img :src="aiYaoSuKa2" class="img4" /></div>
                          <span class="text2">应询卡</span>
                        </div>
                        <div class="right-item">
                          <div class="imgKa"><img :src="aiYaoSuKa31" class="img4" /></div>
                          <span class="saca-text-blue">要素卡</span>
                        </div>
                      </div>
                    </div>
                    <div class="ysk-box-center" style="overflow: hidden;border-bottom-left-radius: 16px;border-bottom-right-radius: 16px;">
                      <div class="left">
                        <div class="row1">
                          <div class="text1">
                            质量指数：<span style="background-color: #00bcfb;color:white;padding: 0 8px;border-radius: 4px;">9.99</span>
                          </div>
                          <div class="text3">
                            2024.11.24-19:31
                          </div>
                        </div>
                        <div class="row2">
                          {{yaosukaDetailData.title}}
                        </div>
                        <div class="row3">
                          <div class="text1" />
                          <!---->
                          <div class="text1" />
                        </div>
                        <div class="row4">
                          <div class="text1">
                            作者名称xxx
                          </div>
                          <div class="text0">|</div>
                          <div class="text1">
                            来源xxx
                          </div>
                        </div>
                        <div class="row4">
                          <div class="text1">
                            被引用次数：0次
                          </div>
                          <div class="text0">|</div>
                          <div class="text1">
                            参考文献：0篇
                          </div>
                        </div>
                        <div class="row5">
                          <div class="item">
                            <div class="text1 text_blue" @click="goToUrl('/ai-original')">
                              <el-image :src="aiYaoSuKaBlue" class="imgBlue"></el-image>
                              F - Card（原文）</div>
                          </div>
                          <div class="item">
                            <div class="text2">
                              <el-image :src="aiYaoSuKaGray" class="imgBlue"></el-image>
                              关键题库</div>
                          </div>
                        </div>
                        <div class="btn1 cpt" @click="doSubmit(id)">
                          学习打卡
                        </div>
                        <div class="settingbox">
                          <div class="item" v-if="yaosukaDetailData.isDoLike == 0">
                            <a href="javascript:void(0)" @click="doLike(id)"  class="item-like-a">
                              <div class="img-1">
                                <img :src="goodImg" alt="" class="img1" />
                              </div>
                              点赞 ({{yaosukaDetailData.good_num}})
                            </a>
                          </div>
                          <div class="item isup item-like" v-if="yaosukaDetailData.isDoLike == 1">
                            <a href="javascript:void(0)" @click="doUnLike(id, 1)" class="item-like-a">
                              <div class="img-1">
                                <img :src="goodBlue" alt="" class="img1" />
                              </div>
                              点赞 ({{yaosukaDetailData.good_num}})
                            </a>
                          </div>
                          <div class="item">
                            <a href="javascript:void(0)" @click="showCommentDialog(id)"  class="item-like-a">
                              <div class="img-1">
                                <img :src="commentImg" alt="" class="img1" />
                              </div>
                              评论 ({{yaosukaDetailData.comment_num}})
                            </a>
                          </div>
                          <div class="item">
                            <a href="javascript:void(0)" @click="showShareDialog(id)"  class="item-like-a">
                              <div class="img-1">
                                <img :src="shareImg" alt="" class="img1" />
                              </div>
                              分享 ({{yaosukaDetailData.share_num}})
                            </a>
                          </div>
                          <div class="item" v-if="yaosukaDetailData.isDoCollected == 0">
                            <a href="javascript:void(0)" @click="doCollect(id)" class="item-like-a">
                              <div class="img-1">
                                <img :src="starImg" alt="" class="img1" />
                              </div>
                              收藏 ({{yaosukaDetailData.collect_num}})
                            </a>
                          </div>
                          <div class="item item-like" v-if="yaosukaDetailData.isDoCollected == 1">
                            <a href="javascript:void(0)"  @click="doUnLike(id, 3)" class="item-like-a">
                              <div class="img-1">
                                <img :src="starBlue" alt="" class="img1" />
                              </div>
                              收藏 ({{yaosukaDetailData.collect_num}})
                            </a>
                          </div>
                          <div class="item" style="width: 170px;">
                            <a href="javascript:void(0)"  @click="doUnLike(id, 3)" class="item-like-a" style="width: 146px;">
                            <div class="img-1">
                              <img :src="starGray" alt="" class="img1" />
                            </div>
                            生成文献索引卡
                            </a>
                          </div>
                          <div style="width: 60px;">
                          </div>
                        </div>
                      </div>
                      <div class="right scroll" style="height: 632px;" ref="scrollContainer" @scroll="handleScroll">
                        <div class="title">
                          关键词
                        </div>
                        <div class="value">
                          关键词一 关键词二 关键词三。
                        </div>
                        <div class="title">
                          摘要
                        </div>
                        <div class="value">
                          随着美白化妆品越来越被人们所重视，其安全性和功效性评价已成为消费者和生产商所关注的重点。综述了国内外对化妆品美白功效评价的进展情况，对不同评价方法的特点进行了比较分析，同时展望了化妆品美白功效评价的未来发展趋势，为我国美白化妆品事业的发展提供参考。
                        </div>
                        <div class="title">
                          大纲
                        </div>
                        <div class="value">
                          1.引言与定义：概述美白化妆品的重要性、定义（如通过抑制黑色素代谢改善肤色）和分类（基于作用机制分为抑制黑色素生成类、抗氧化类等6类）。
                          2.有效成分与机制：详细列举10种美白成分（如曲酸、烟酰胺、氢醌醌等），解释其化学作用（如曲酸捕获铜离子抑制酪氨酸酶）。
                          3.安全性评估：对每种成分进行安全分析，涵盖动物实验、临床试验和体外测试（如曲酸在1%浓度下安全，氢醌醌禁用）。
                          4.效果评估：评价成分美白功效，使用细胞实验和临床数据（如烟酰胺在5%浓度抑制色素沉着）。
                          5.结论与展望：总结行业现状，强调植物提取物趋势，并呼吁开发新评价方法。
                        </div>
                        <div class="title">
                          时间线
                        </div>
                        <div class="value">
                          •1990s：果酸作为化妆品原料兴起，1992年美国开始流行，引发全球热潮；1996年FDA要求CIR对果酸进行安全评价。
                          •2000s：苯乙基间苯二酚（SymWhite377）被报道为高效酪氨酸酶抑制剂；2000年以来有3例过敏报告。
                          •2010s：多项研究发表，如2011年对曲酸安全性的评估，2013年烟酰胺凝胶临床试验。
                          •2020s：最新趋势，如2020年纳米技术在曲酸酯应用中的研究，文档发表于2024年（中图分类号信息），强调植物提取物和标准化评估的未来方向。
                          时间线显示，安全评价方法从动物实验向体外模型演进，法规逐步严格（如氢醌醌禁用）。
                        </div>
                        <div class="title">
                          结论
                        </div>
                        <div class="value">
                          本文主要是对美白化妆品的介绍，以及对其中部分有效成分进行了列举。开发新的美白化妆品需要对其成分和安全性进行系统的了解和学习，对于开发新的美白化妆品来说这是必须要掌握的。这些有效成分并不是只有益处而没有坏处，下一步的方向就是如何把有效成分结合在一起并且最大程度不影响其效果，同时减小其毒性。这还需要进一步的研究，得以让化妆品行业的发展更加快速。
                          美白祛斑化妆品对改善和提高人们的生活质量起着不可忽视的作用，越来越受到消费者[39]的青睐。作为美容业中的一大产业，其发展趋势仍然围绕着开发新的美白祛斑产品和建立便捷有效的功效评价方法而展开。
                          目前，许多著名的化妆品公司和研究机构投入大量的人力物力进行新型美白祛斑添加剂的开发，已投入使用的新型美白祛斑添加剂越来越多，但是与之相适应的美白祛斑功效检测方法却没有什么变化。体外快速筛选优良的美白祛斑添加剂是开发新型美白祛斑产品的第一步，这一步对于化妆品原料开发商及化妆品生产厂家都至关重要。
                          植物提取物[38]研制而成的化妆品具有抗衰老、美白嫩肤的作用，这种化妆品已经成为消费者所信赖的产品。植物提取物主要以植物活性成分的应用作为基础，而与传统意义上的化妆品相比较，植物提取物制成的化妆品更容易被皮肤有效地吸收，不会在体内产生沉积。所以，植物提取物在化妆品行业的市场前景有不断增加的趋势，受到大众追捧。但是近年来也有不少关于[38]化妆品不良反应的报道，关于化妆品的安全性问题也引起了广泛的关注，所以国内外也都开始加大对植物提取物在化妆品应用方面的研发力度，不断研发出植物中的有效成分并加以利用。从这方面看，植物提取物在化妆品方面的应用前景非常广阔，当然这类化妆品也不是绝对的安全，在使用时还是要根据自己的肤质进行有针对性的选择使用。
                        </div>
                        <div class="title">
                          局限性
                        </div>
                        <div class="value">
                          •方法局限性：安全评估依赖动物模型（如大鼠实验），可能无法完全反映人体反应；效果评估缺乏统一标准，体外测试（如细胞培养）与实际应用有差距。
                          •数据局限：部分成分研究不足（如红景天和白藜藜芦醇），临床数据样本小（如烟酰胺试验仅部分受试者报告），且长期副作用证据薄弱。
                          •范围局限：重点聚焦常见成分（如曲酸、维生素C），新兴植物提取物讨论较浅；未深入讨论文化或市场差异（需针对性选择肤质）。
                          •实践局限：文档承认评价方法滞后于新成分开发（如美白祛斑添加剂增多但检测方法未变），呼吁更多跨学科研究。
                        </div>
                      </div>
                      <!-- 滚动到底部按钮 -->
                      <div style="position: absolute;left: 64%; top: 653px;">
                        <div class="go_to_bottom"  @click="scrollToBottom" v-show="go_to_bottom_show">
                          <el-image :src="goToBottom" style="width:40px;height:40px;" alt="" width="40" height="40"></el-image>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="askwrap">
            <div class="">
              <div class="question-content-box0"></div>
              <div class="question-content-box2">
                <div class="ysk-box" style="height: 120px;">
                  <el-input type="textarea" :rows="5" resize='none' autocomplete="off" placeholder="请输入问题，可通过shift+回车换行"  v-model="askContent" class="textarea"></el-input>
                </div>
                <div class="imgbox">
                  <a href="javascript:void(0)"><img :src="fileUpload" class="img3 cpt"></a>
                  <a href="javascript:void(0)" alt="提问" @click="askQuestion()"><img :src="shangchuan2" class="img2 cpt" ></a>
                </div>
              </div>
            </div>
          </div>
          <div style="width:100%;height: 32px;line-height: 30px;text-align: center;font-size:12px;color:#a1a0a0">本次会话由AI生成，仅供参考。</div>
        </div>
      </div>
    </div>

    <el-dialog v-model="commentDialog" :width="550" title="评论">
      <el-form ref="commentFormRef" label-width="80">
        <el-form-item label="评论内容">
          <el-input type="textarea" :rows="3" style="border-radius: 4px;border: 1px solid #f19a9a" resize='none' autocomplete="off" v-model="commentForm" placeholder="请输入评论内容"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="display: flex;flex-direction: row;justify-content: center;">
            <el-button type="primary" @click="handleComment()">提交</el-button>
            <el-button type="default" @click="cancelComment()">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style src="@/pages/ai/style/yaosukaDetail.css"  scoped></style>
<style lang="scss" scoped>
.item-no-hand {
  width: 90px;
  padding-right: 10px;
  height: 32px;
  border-radius: 449px;
  display: flex;
  align-items: center;
  cursor: default;
  justify-content: center;
  font-size: 12px;
}
.item-like-a {
  display: flex;
  flex-direction: row;
  border-radius: 449px;
  width: 90px;
  height: 32px;
  font-size: 12px;
  line-height: 35px;
  background-color: #ffffff;
}
.item-like-a:hover {
  display: flex;
  flex-direction: row;
  width: 90px;
  height: 32px;
  line-height: 35px;
  font-size: 12px;
  opacity: 0.5;
  background-color: #ECECEC;
}
.item-like {
  background-color: #ffffff;
  color: #00bcfb;
  font-size: 12px;
  .text1 {
    color: #00bcfb;
  }
}
.go_to_bottom {
  border-radius: 16px;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  color: #ffffff;
  text-align: center;
  padding: 0;
  background-color: #ffffffff;
  z-index: 19;
}
</style>
